<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
		<style>
			.box {
				margin: 20px auto;
				padding: 10px 20px;
				width: 80%;
				font-size: 13px;
			}
			
			.box-head {
				padding: 15px 20px;
				font-size: 24px;
				text-align: center;
				font-weight: bolder;
			}
			
			.box-body th {
				text-align: right;
				font-weight: normal;
			}
			
			.box-body input {
				vertical-align: middle;
				height: 38px;
				width: 350px;
				border: 1px solid #ccc;
				border-radius: 5px;
				padding-left: 10px;
				margin: 10px 0;
			}
			
			.box-body input:focus::-webkit-input-placeholder,
			.box-body input:hover::-webkit-input-placeholder {
				color: #c2c2c2;
			}
			
			.box-body tr:last-child {
				text-align: center;
			}
			
			.box-body tr:last-child input {
				width: 120px;
				height: 40px;
				cursor: pointer;
				background: #4393C9;
				color: white;
				font-size: 16px;
			}
			
			.box-body .error {
				height: 30px;
				line-height: 30px;
				font-size: 10px;
				background: #FFF2E5;
				color: red;
				margin-left: 10px;
				padding-left: 10px;
				padding-right: 10px;
			}
			
			.box-body .success {
				height: 30px;
				line-height: 30px;
				font-size: 10px;
				background: #E6FEE4;
				color: green;
				margin-left: 10px;
				padding-left: 10px;
				padding-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box-head">填写注册信息</div>
			<div class="box-body">
				<form action="" method="post">
					<table>
						<tr>
							<th>用户名称：</th>
							<td>
								<input type="text" name="username" placeholder="长度4~12，英文大小写字母" />
							</td>
							<td>
								<div></div>
							</td>
						</tr>
						<tr>
							<th>密 码：</th>
							<td>
								<input type="password" name="pwd" placeholder="长度6~20，大小写字母、数字或下划线" />
							</td>
							<td>
								<div></div>
							</td>
						</tr>
						<tr>
							<th>确认密码：</th>
							<td>
								<input type="password" name="repwd" placeholder="请再次输入密码进行确认" />
							</td>
							<td>
								<div></div>
							</td>
						</tr>
						<tr>
							<th>手机号码：</th>
							<td>
								<input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号" />
							</td>
							<td>
								<div></div>
							</td>
						</tr>
						<tr>
							<th>籍贯：</th>
							<td>
								<select id="province">
									<option value="-1">省份</option>
								</select>
								<select id="city">
									<option value="-1">城市</option>
								</select>
							</td>
						</tr>
						<tr>
							<td colspan="3">
								<input type="submit" value="注册" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<script>
			var inputs = document.getElementsByTagName('input');
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onblur = inputBlur;
			}

			function inputBlur() {
				var name = this.name;
				var value = this.value;
				var tips = this.placeholder;
				var div = this.parentNode.nextElementSibling.firstChild;
				value = value.trim();
				if(value == null || value == '') {
					div.innerHTML = "输入框不能为空";
					div.className = 'error';
				} else {
					var reg = getRegMsg(name);
					if(value.match(reg)) {
						div.innerHTML = "输入正确";
						div.className = 'success'
					} else {
						div.innerHTML = tips;
						div.className = 'error';
					}
				}
			}

			function getRegMsg(name) {
				var reg = '';
				switch(name) {
					case 'username':
						reg = /^[a-zA-Z]{4,12}$/;
						break;
					case 'pwd':
						reg = /^\w{6,20}$/;
						break;
					case 'repwd':
						var pwd = document.getElementsByTagName('input')[1].value;
						reg = new RegExp('^' + pwd + '$');
						break;
					case 'tel':
						reg = /^1[34578]\d{9}$/;
						break;
					case 'email':
						reg = /^(\w(\-|\.)*)+@+(\w+(\-)?)+(\.\w{2,})$/;
						break;
					default:
						break;
				}
				return reg;
			}
			var provinceArr = ['浙江', '江苏', '上海'];
			var cityArr = [
				['杭州', '宁波', '温州', '绍兴', '台州'],
				['南京', '苏州', '无锡', '扬州'],
				['黄埔区', '浦东区', '静安区']
			];
			var province = document.getElementById('province');
			var city = document.getElementById('city');
			for(var i in provinceArr) {
				var op = new Option(provinceArr[i], i);
				province.options.add(op);
			}
			province.onchange = function() {
				city.length = 0;
				var selected = province.value

				for(var j in cityArr[selected]) {
					var op = new Option(cityArr[selected][j], j);
					city.options.add(op);
				}
			}
		</script>
	</body>

</html>